<template>
    <div>
        <div class="tree-selected" v-if="showSelected && showText">
            {{showText}}
        </div>
        <ul ref="treeItems">
            <template v-for="(item, index) in model" >
                <tree-item
                    :key="index"
                    :model="item"
                    :text-field="textField"
                    :children-field="childrenField"
                    :value-field="valueField"
                    :init-node-value="initNodeValue"
                    :expand-init-node="expandInitNode"
                    :expand-node-path="initNodePath"
                    @item-clicked="_itemClicked">
                </tree-item>
            </template>
        </ul>
    </div>
</template>

<script>
import treeItem from './treeItem'

export default {
    data() {
        return {
            selectedNode: {},
            selected: false,
            initNodeValue: null,
            initNodePath: []
        }
    },
    
    computed: {
        initNode() {
            
            if (this.initNodeValue) {
                return this._getNode(this.model, this.initNodeValue)
            }

            return {}
        },

        showText() {
            return (this.selected && this.selectedNode[this.textField]) || (!this.selected && this.initNode && this.initNode[this.textField])
        }
    },

    props: {
        model: Array,
        textField: {
            type: String,
            default: 'name'
        },
        valueField: {
            type: String | Number,
            default: 'id'
        },
        childrenField: {
            type: String,
            default: 'children'
        },
        showSelected: Boolean,
        showParentNode: Boolean,
        expandInitNode: {
            type: Boolean,
            default: true
        },
        initData: Object | String | Number
    },

    components: {
        treeItem
    },

    created() {
        if (this.initData) {
            
            if (typeof(this.initData) == 'object') {
                this.initNodeValue = this.initData[this.valueField]
            } else {
                this.initNodeValue = this.initData
            }
        } else {
            this.initNodeValue = null
        }

    },

    methods: {
        _itemClicked($event) {
            
            if (!this.showParentNode && $event.isParent) {
                // pass
            } else {
                this.selectedNode = $event.data || {}
                this.selected = true
                this.initNodeValue = this.selectedNode[this.valueField]
            }
            
            this.$emit('item-clicked', $event)
        },

        _expandNodePath(node) {
            this.initNodePath.push(node[this.valueField])
            if(node.$parentNode) {
                this._expandNodePath(node.$parentNode)
            }
        },

        _getNode(data, id, parentNode) {
            let dt = data
            if (!dt) {
                return {}
            }
            let selected = dt.filter(t => t[this.valueField] + '' == id  + '')[0]

            if (selected) {
                
                if (!selected.$parentNode) {
                    selected.$parentNode = parentNode
                }

                if (!parentNode) {
                    selected.$isParent == true
                }

                this.expandInitNode && (this._expandNodePath(selected))

                return selected
            } else {
                for (let k in dt) {
                    dt[k].$parentNode = parentNode
                    selected = this._getNode(dt[k][this.childrenField], id, dt[k])
                    if (selected) {
                        return selected
                    }
                }
            }
        },

        getSelected() {
            return this.selectedNode || {}
        }
    }
}
</script>

<style lang="scss" scoped>
.tree-selected {
    font-size: 18px;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: 1px solid #dddddd;
}
</style>

